<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{i}} <button @click="i++">+</button>
			<div v-red>Hello</div>
			<div v-color="'pink'">测试</div>
			<hr >
			<textarea  v-model="val"></textarea>
			<button @click="run">运行</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					i: 0,
					val: ''
				},
				directives: {
					red: { //自定义red指令，需要声明钩子函数
						bind(){
							// console.log('bind...')
						},
						inserted(el){
							// console.log('inserted...', el)
							// el.style.color = 'red'
							// console.log(el.style)
							el.style.fontSize = '100px'
							el.style.color="green"
						},
						update(){
							// console.log('update....')
						},
						componentUpdated(){
							// console.log('componentUpdated...')
						},
						unbind(){
							// console.log('unbind...')
						}
					},
					color: {
						
						inserted(el,binding){
							console.log(binding)
							el.style.color = binding.value
							// el.style.fontSize="100px"
						}
					}
				},
				methods: {
					run(){
						eval(this.val)
					}
				},
				// methods:{
				// 	run(){
				// 		eval(this.val)
				// 	}
				// }
			})
		</script>
	</body>
</html>
